<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../node_modules/vue/dist/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <!-- 使用table 渲染数据 -->
        <table>
            <thead>
                <tr>
                    <th>商品的名称</th>
                    <th>图片</th>
                    <th>价格</th>
                    <th>商品数量</th>
                    <th>操作</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in goodslist" :key="item.id">
                    <td>
                        <input type="checkbox" v-model="checkedArr" :value="item" @change='singleCheckFn'>
                        <span>
                            {{item.name}}
                        </span>

                    </td>
                    <td>
                        <img :src="item.pic" style="width:100px" alt="">
                    </td>
                    <td>{{item.price}}</td>
                    <td>
                        <button @click="item.num--" :disabled='item.num==1'>-</button>
                        <input type="text" v-model="item.num" style="width:30px" @change="changeNum(item)">
                        <button @click="item.num++" :disabled="item.num==item.limit">+</button>
                    </td>
                    <td>
                        <button @click="delBtn(item.id)">删除</button>
                    </td>
                </tr>
            </tbody>
        </table>
        <!-- 底部的tab -->
        <div>
            <p>
                <input type="checkbox" v-model="chckedAll" @change="checkallFn"> 全选
                <span>总价:{{getTotalPriceComputed}}</span>
                <span>总价:{{totalPrice}}</span>
            </p>
        </div>

    </div>
</body>

</html>
<script>
    const app = Vue.createApp({
        data() {
            return {
                goodslist: [
                    {
                        "id": 1,
                        "name": "商品1",
                        "price": 10,
                        "num": 1,
                        "limit": 5,
                        "pic": "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    },
                    {
                        "id": 2,
                        "name": "商品2",
                        "price": 20,
                        "num": 2,
                        "limit": 5,
                        "pic": "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    },
                    {
                        "id": 3,
                        "name": "商品3",
                        "price": 30,
                        "num": 3,
                        "limit": 5,
                        "pic": "https://static.maizuo.com/pc/v5/usr/movie/44dc08914d508fc47c8267c6ca73f2d8.jpg"
                    }
                ],
                checkedArr: [], // 选中的所有的商品集合
                chckedAll: false, // 不选中 默认
                totalPrice: 0  // 总价
            }
        },
        computed: {
            getTotalPriceComputed() {
                let sum = 0;
                this.checkedArr.forEach(item => {
                    sum += item.price * item.num
                })

                return sum
            }
        },
        watch: {
            checkedArr: {
                handler(val) {
                    let sum = 0;
                    val.forEach(item => {
                        sum += item.price * item.num
                    })

                    this.totalPrice = sum
                },
                deep: true,
                immediate: true
            }
        },
        methods: {
            checkallFn() { // 全选/全不选
                // console.log(this.chckedAll);
                // 当使用点击事件的时候, 点击获取的是数据响应式之前的, 后执行的响应式
                // 当 checkedArr为 goodslist的时候, 说明全部都选中,否则不选中
                if (this.chckedAll) {
                    this.checkedArr = this.goodslist
                } else {
                    this.checkedArr = []
                }
            },
            //  单选
            singleCheckFn() {
                if (this.checkedArr.length == this.goodslist.length && this.goodslist.length !== 0) {
                    this.chckedAll = true
                } else {
                    this.chckedAll = false
                }
            },
            // 删除功能
            delBtn(id) {
                console.log(id);
                // 根据参数id 找到要删除的数据,将其删除
                this.goodslist.forEach((item, index) => {
                    if (item.id == id) {
                        // 怎么删? 
                        this.goodslist.splice(index, 1)
                    }
                })

                // 更新checkedArr 选中的商品集合,过滤下 没有当前被删除的id 项的数据
                this.checkedArr = this.goodslist.filter(item => item.id != id)

                // 重新比较总数据长度和 选中的数据的长度
                this.singleCheckFn()

            },
            changeNum(item) {
                if (item.num > item.limit) {
                    item.num = item.limit
                }
                if (item.num < 1) {
                    item.num = 1
                }
            },
            // 总价
            // gettotalPrice() {
            //     // 选中的商品累加求和
            //     let sum = 0;
            //     this.checkedArr.forEach(item => {
            //         sum += item.price * item.num
            //     })

            //     return sum
            // }

        }
    }).mount('#app')

</script>